
import React, { Component } from 'react';

class Parent13 extends Component {
    // state = {
    //     value: true
    // }
    render() {
        return (<div>
            {/* <Parent12 value={this.state.value}></Parent12> <br /> */}
            <Parent12></Parent12>
            {/* <button onClick={() => { this.setState({ value: !this.state.value }) }}>改变value值</button> */}
        </div>);
    }
}

export default Parent13;

class Parent12 extends Component {

    // state = {
    //     value: true
    // }
    // 1.0 render钩子函数
    // 作用是：返回当前组件的jsx结构，当调用了this.setState的时候会被重新触发调用
    render() {
        console.log('1.0 render');
        return (<div>
            {/* { this.props.value + ''} <br /> */}
            {/* <button onClick={() => { this.setState({ value: !this.state.value }) }}>改变value值</button> */}
            <button onClick={() => { this.forceUpdate(); /* 强制刷新有页面*/ }}>点击调用forceUpdate方法</button>
        </div>);
    }

    // 2.0 componentDidUpdate 数据更新完成的生命周期
    componentDidUpdate() {
        console.log('2.0 componentDidUpdate');
    }

}
